<template>
	<view class="main">
		
		<view class="main-text"> 选择你的生日 </view>
		<view class="second-text">给你推荐年龄适配的异性</view>
		
		<view class="position-1">
			<image src="../../static/images/birthday.png" mode="widthFix"></image>
		</view>
		
		<view class="position-2">
			<picker end="2005-01-01"  mode="date" @change="changeBirthday" selector-type="select">
				<view>{{birthday}}</view>
			</picker>
		</view>
		
		
		
		<view class="next-bt" @tap="navigateToPosition">下一步</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				birthday:"2000-01-01",
				sex: 0,
			}
		},
		onLoad(option) {
			this.sex = option.sex;
		},
		methods: {
			navigateToPosition(){
				uni.navigateTo({
					url: "./position?sex=" + this.sex + "&birthday=" + this.birthday
				})
			},
			changeBirthday(event){
				this.birthday = event.detail.value;
			},
		}
	}
</script>

<style lang="scss" scoped>

.main-text{
	font-size: 40rpx;
	font-weight: bold;
	margin-top: 200rpx;
	text-align: center;
}
.second-text{
	margin-top: 20rpx;
	font-size: 28rpx;
	text-align: center;
	color: #515151;
}
.position-1{
	margin-top: 150rpx;
	text-align: center;
	image{
		width: 80rpx;
	}
}
.position-2{
	margin-top: 50rpx;
	picker{
		border-bottom: 2rpx solid #CACACA;
		height: 100rpx;
		width: 300rpx;
		margin: 0 auto;
		view{
			text-align: center;
			height: 100 rpx;
			line-height: 100rpx;
			font-weight: bold;
		}
	}
}


.next-bt{
	position: fixed;
	bottom: 100rpx;
	width: 500rpx;
	margin: auto;
	left: 0;
	right: 0;
	text-align: center;
	font-weight: bold;
	height: 80rpx;
	line-height: 80rpx;
	border-radius: 50rpx;
	background-color: #7AE8D1;
}
</style>
